import {
  ExpertAppointment,
  ExpertAppointmentTimes,
  ExpertProps,
} from '@/api/expert';
import { Button, Divider, Popup } from '@antmjs/vantui';
import { Text, Textarea, View } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';
import useDateSelecor from './useDateSelecor';

export default function useReservationComfirm(props: {
  detail: ExpertProps;
  onSuccess: Function;
}) {
  const router = useRouter();

  const [show, setShow] = useState<boolean>(false);
  const [remark, setRemark] = useState<string>();

  const { data: time } = useRequest(
    () => ExpertAppointmentTimes({ expertId: props.detail?.id }),
    {
      ready: Boolean(props.detail?.id),
      onSuccess: function (data) {
        data?.[0] && setSelectDate(data[0] as any);
      },
    }
  );

  //开始预约
  const { runAsync, loading } = useRequest(ExpertAppointment, {
    manual: true,
  });

  const {
    renderNode: renderDateSelecorNode,
    setSelectDate,
    selectedTimes,
  } = useDateSelecor({
    dates: time!,
  });

  function handleClose() {
    setShow(false);
    setRemark(undefined);
    setSelectDate(undefined);
    props.onSuccess();
  }

  function renderNode() {
    return (
      <Popup show={show} position='bottom' round onClose={() => handleClose()}>
        <View className='flex items-center py-3 px-4'>
          <Text className=' text-black text-lg font-bold block'>
            选择咨询时间
          </Text>
          <Text className=' text-xs text-gary1'>（最早可约48小时后）</Text>
        </View>
        <Divider className='m-0' />
        <View className='p-4'>
          {renderDateSelecorNode()}

          <Text className=' block text-base text-black font-bold mt-6 mb-4 leading-none'>
            预约备注
          </Text>
          <Textarea
            cursorSpacing={100}
            onInput={(e) => setRemark(e.detail.value)}
            placeholder='请输入备注'
            className='bg-[#F6F7FB] py-2 px-4 h-[180px] rounded-lg w-full block'
          />

          <View className=' text-xs text-gary3 text-center mt-5 mb-2'>
            <Text className=' block'>
              提交预约后，专家将在24小时内确认预约状态
            </Text>
            <Text className=' block'>
              确认预约将支付288帮豆，预约失败则帮豆返回
            </Text>
          </View>

          <Button
            loading={loading}
            type='primary'
            block
            size='large'
            onClick={async () => {
              if (!selectedTimes.length)
                return Taro.showToast({ title: '请选择时段', icon: 'none' });

              await runAsync({
                expertId: props.detail.id!,
                times: selectedTimes.join(','),
                remark: remark,
                sceneId: router?.params?.sceneId,
              });

              handleClose();
            }}
          >
            确认预约
          </Button>
        </View>
      </Popup>
    );
  }

  return {
    renderNode,
    open: () => setShow(true),
  };
}
